<template>
  <div class="standard-table">
    <el-table
      v-loading="loading"
      :data="data"
      border
      stripe
      style="width: 100%"
      :header-cell-class-name="'bg-gray-100 dark:bg-gray-700'"
      class="custom-table"
      v-bind="$attrs"
    >
      <slot></slot>
    </el-table>
    
    <div class="pagination-container mt-4 flex justify-center" v-if="showPagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="pageSizes"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        class="custom-pagination"
      />
    </div>
  </div>
</template>

<script>
import { ref, watch } from 'vue'

export default {
  name: 'StandardTable',
  props: {
    data: {
      type: Array,
      required: true
    },
    loading: {
      type: Boolean,
      default: false
    },
    total: {
      type: Number,
      default: 0
    },
    showPagination: {
      type: Boolean,
      default: true
    },
    pageSizes: {
      type: Array,
      default: () => [10, 20, 50, 100]
    },
    defaultPageSize: {
      type: Number,
      default: 10
    },
    defaultCurrentPage: {
      type: Number,
      default: 1
    }
  },
  emits: ['size-change', 'current-change', 'page-change'],
  setup(props, { emit }) {
    const pageSize = ref(props.defaultPageSize)
    const currentPage = ref(props.defaultCurrentPage)
    
    const handleSizeChange = (val) => {
      pageSize.value = val
      emit('size-change', val)
      emit('page-change', { page: currentPage.value, pageSize: val })
    }
    
    const handleCurrentChange = (val) => {
      currentPage.value = val
      emit('current-change', val)
      emit('page-change', { page: val, pageSize: pageSize.value })
    }
    
    watch(() => props.defaultCurrentPage, (val) => {
      if (val !== currentPage.value) {
        currentPage.value = val
      }
    })
    
    return {
      pageSize,
      currentPage,
      handleSizeChange,
      handleCurrentChange
    }
  }
}
</script>

<style scoped>
.custom-table {
  border-radius: 8px;
  overflow: hidden;
}

.custom-table :deep(.el-table__header) th {
  font-weight: 600;
}

:deep(.el-table__row) {
  transition: all 0.3s;
}

:deep(.el-table__row:hover) {
  background-color: var(--el-color-primary-light-9) !important;
  transform: translateY(-2px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.custom-pagination {
  margin-top: 16px;
}
</style> 